<template>
	<view class="about-us" style="user-select: text;">
		<sunMenu></sunMenu>
		<view class="page-container">
			<view class="header">
				<view class="title">聯絡我們</view>
				<view class="subtitle">如有任何問題，歡迎隨時與我們聯繫</view>
			</view>

			<!-- <view class="contact-info">
				<view class="info-item">
					<u-icon name="email" size="48" color="#2979ff"></u-icon>
					<text class="info-text">客服信箱：xiakoya88@gmail.com</text>
				</view>
			</view> -->

			<view class="form-container">
				<view class="form-header">
					<view class="form-title">問題反饋</view>
					<view class="form-desc">請填寫以下表單，我們會盡快回覆您</view>
				</view>

				<view class="form-wrapper">
					<u-form :model="formData" ref="form" :rules="rules" :labelWidth="120" labelPosition="left">
						<u-form-item label="問題主旨" prop="title" borderBottom>
							<u-input v-model="formData.title" placeholder="請輸入問題主旨" border="false"></u-input>
						</u-form-item>

						<u-form-item label="聯絡人稱呼" prop="name" borderBottom>
							<u-input v-model="formData.name" placeholder="請輸入您的稱呼" border="false"></u-input>
						</u-form-item>

						<u-form-item label="電子郵件" prop="email" borderBottom>
							<u-input v-model="formData.email" placeholder="請輸入電子郵件" border="false"></u-input>
						</u-form-item>

						<u-form-item label="聯絡電話" prop="tel" borderBottom>
							<u-input v-model="formData.tel" placeholder="請輸入聯絡電話" border="false"></u-input>
						</u-form-item>

						<u-form-item label="問題描述" prop="description"> 
								<u--textarea :count="true" maxlength="100"
								 v-model="formData.description" placeholder="請簡述您的問題（100字內）" ></u--textarea>
						</u-form-item>

						<u-form-item label="圖片上傳" prop="images">
							<u-upload :fileList="fileList" 
								@afterRead="afterRead" 
								@delete="deletePic" 
								:maxCount="3" 
								name="3"
								multiple
								:previewFullImage="true"
								uploadIcon="camera-fill"
								width="200rpx"
								height="200rpx"></u-upload>
							<view class="tips">最多上傳3張圖片，支持預覽和刪除</view>
						</u-form-item>

						<u-form-item label="驗證碼" prop="captcha">
							<view class="captcha-container">
								<u-input v-model="formData.captcha" 
									placeholder="請輸入驗證碼" 
									class="captcha-input"
									border="false"></u-input>
								<image :src="captchaUrl" 
									@click="refreshCaptcha" 
									class="captcha-image"
									mode="aspectFit"></image>
							</view>
						</u-form-item>

						<view class="submit-btn">
							<u-button type="primary" 
								@click="submitForm" 
								:customStyle="{
									background: 'linear-gradient(to right, #0ABAB5, #0AC8C3)',
									color: '#ffffff',
									border: 'none'
								}">提交問題</u-button>
						</view>
					</u-form>
				</view>
			</view>

			<view class="terms-container">
				<view class="terms-title">會員服務條款暨隱私權保護政策</view>
				<view class="terms-date">最近修訂日：2025-04-12</view>
				
				<view class="terms-content">
					<view class="chapter">第一章　適用範圍與會員資格</view>
					<view class="section">1. 「會員」係依本條款完成註冊並通過認證之自然人或法人。</view>
					<view class="section">2. 當您使用夏璽玥網路有限公司（下稱「本公司」或「我們」）所營運之 MUSE RUN 網站、行動應用程式、線上會員中心、客服系統、實體活動報名平台與其他數位工具（以下合稱「本服務」）時，即受本條款與適用法令之拘束。</view>
					<view class="section">3. 本公司保留審核、暫停、終止會員資格及全部或部分服務之權利。</view>
					<view class="section">4. 條款更新將公告於本站並自公告日起七日後生效；重大變更將以電子郵件或彈窗另行通知。</view>

					<view class="chapter">第二章　會員帳號與資料</view>
					<view class="section">1. 會員應提供真實、最新且完整之資料，並負責維護其更新。</view>
					<view class="section">2. 帳號、密碼限本人使用並應妥善保管；任何因帳號行為所致之結果均由會員自行承擔。</view>
					<view class="section">3. 發現帳號遭未授權使用，應立即通知本公司；因遲延通知所生損失，由會員自行負責。</view>
					<view class="section">4. 會員若提供不實訊息、冒用他人資料或違反法令，本公司得暫停或終止其帳號並保留法律追訴權。</view>

					<view class="chapter">第三章　隱私權保護政策</view>
					<view class="section">3-1　政策適用範圍</view>
					<view class="section">本政策適用於本公司及其所經營之 MUSE RUN 網站、行動應用程式、線上會員中心、客服系統、實體活動報名平台與數位工具（以下合稱「本服務」）。若您透過第三方連結存取其他平台，該第三方之隱私權政策將另行適用。</view>

					<view class="section">3-2　術語定義</view>
					<view class="section">* 個人資料：可直接或間接識別自然人之資料，包括但不限於姓名、地址、電話、電子郵件、裝置識別碼、IP 位址、定位資訊、交易與付款資訊、求職資料等。</view>
					<view class="section">* Cookie 及類似技術：指儲存於使用者裝置上、用以識別與追蹤之文字檔、像素標籤 (pixel)、網路信標 (beacon)、LocalStorage 及 SDK。</view>
					<view class="section">* DPO（資料保護長）：依 GDPR 指派，負責隱私治理與監督之專責人員。</view>

					<view class="section">3-3　個人資料蒐集之目的、類型與合法性基礎</view>
					<view class="section">本公司依《個人資料保護法》「特定目的表」及 GDPR 第 6 條規定，就下列目的蒐集並處理您的個人資料：</view>
					<view class="section">1. 行銷、廣告、顧客管理與服務（目的代碼 040）</view>
					<view class="section">    * 蒐集項目：姓名、聯絡資訊、Cookie 參數、瀏覽紀錄</view>
					<view class="section">    * 合法性基礎：您的同意或本公司之合法利益</view>
					<view class="section">2. 合約之履行與交易關係維持（目的代碼 069／061）</view>
					<view class="section">    * 蒐集項目：會員帳號、交易明細、付款與物流資訊</view>
					<view class="section">    * 合法性基礎：與您之契約必要</view>
					<view class="section">3. 統計、研究與服務優化（目的代碼 063／151）</view>
					<view class="section">    * 蒐集項目：去識別化使用紀錄、裝置資訊、帳號識別碼</view>
					<view class="section">    * 合法性基礎：本公司之合法利益</view>
					<view class="section">4. 人力資源管理（目的代碼 148）</view>
					<view class="section">    * 蒐集項目：履歷、學經歷、移民身分等求職資料</view>
					<view class="section">    * 合法性基礎：您的同意</view>

					<view class="section">3-4　Cookie 及類似技術政策</view>
					<view class="section">1. 分群管理：Essential（必要）／Analytics（分析）／Advertising（廣告）。</view>
					<view class="section">2. 同意機制：首次造訪時顯示 IAB TCF 2.2 標準之 Cookie Banner；您可隨時於「Cookie 偏好中心」調整設定。</view>
					<view class="section">3. Do Not Track：目前瀏覽器 DNT 訊號尚無一致標準，惟您可透過偏好中心停用所有非必要追蹤。</view>

					<view class="section">3-5　個人資料之使用、處理與揭露</view>
					<view class="section">* 依前述目的於本公司內部及授權之第三方服務提供者（支付、雲端、廣告、物流、客服、自動化行銷）間共享。</view>
					<view class="section">* 如涉及跨境傳輸，本公司已與受托方簽署 EU Standard Contractual Clauses (SCC) 或同等保障機制。</view>
					<view class="section">* 於資產併購、分割、重組時，個人資料得隨交易移轉，但仍受本政策約束。</view>
					<view class="section">* 未經您同意，不會將您的資料販售、出租或作廣告目的之外揭露。</view>

					<view class="section">3-6　資料保存期限與刪除</view>
					<view class="section">資料將依下列原則擇一為止：</view>
					<view class="section">1. 達成蒐集目的所需期間；</view>
					<view class="section">2. 依適用法令、稅務、契約保存要求；</view>
					<view class="section">3. 您行使刪除權並完成身份驗證。</view>

					<view class="section">3-7　跨境傳輸與第三方處理者</view>
					<view class="section">您的資料可能被傳輸至台灣以外（含但不限於新加坡、德國、美國）的雲端資料中心，並採用 AES‑256 與 TLS 1.3 加密，符合 ISO 27001／SOC 2 Type II 控管。</view>

					<view class="section">3-8　資訊安全與事件通報</view>
					<view class="section">* 本公司已取得 ISO 27001:2022 認證並導入 SOC 2 控制。</view>
					<view class="section">* 關鍵資料採用 Role‑Based Access Control、零信任架構、防毒、IDS／IPS、24×7 SIEM 監控。</view>
					<view class="section">* 一旦偵測疑似外洩事件，72 小時內通報主管機關並通知受影響資料主體。</view>

					<view class="section">3-9　未成年人保護</view>
					<view class="section">本服務並非以未滿 13 歲兒童為對象。我們不蓄意蒐集其資料；若發現誤蒐集，將立即刪除。</view>

					<view class="section">3-10　資料主體權利</view>
					<view class="section">依個資法第 3 條及 GDPR 第 15‑22 條，您得行使：</view>
					<view class="section">1. 查詢／閱覽權</view>
					<view class="section">2. 副本請求權</view>
					<view class="section">3. 更正權</view>
					<view class="section">4. 刪除權（被遺忘權）</view>
					<view class="section">5. 處理限制權</view>
					<view class="section">6. 對自動化決策之異議</view>
					<view class="section">7. 資料可攜權</view>
					<view class="section">申請方式詳見第 3‑13 節聯絡資訊；我們將於 30 日內回覆。</view>

					<view class="section">3-11　第三方連結與社群外掛</view>
					<view class="section">連結至 Facebook、YouTube 等第三方平台時，相關資料處理受該平台政策規範，我們不負其內容與行為責任。</view>

					<view class="section">3-12　本政策之修訂</view>
					<view class="section">政策將因業務、法規更新不定期修訂；最新版本將公布於本站並標示生效日。重大變更將以 Email 或網站公告通知。</view>

					<view class="chapter">第四章　使用行為規範</view>
					<view class="section">1. 會員須遵守中華民國法令與國際網際網路慣例，不得利用本服務從事侵害他人或違法行為。</view>
					<view class="section">2. 禁止上載、散布任何侵權、毀謗、猥褻、違反公共秩序或善良風俗之內容，或未經授權之商業廣告、強烈政治或宗教偏激言論，以及其他違反本條款之行為。</view>
					<view class="section">3. 本公司可依判斷刪除違規內容、限制功能、暫停或終止服務，並得向行為人請求損害賠償。</view>

					<view class="chapter">第五章　本公司專有權利</view>
					<view class="section">1. 本服務所含之軟體、程式、商標、圖文及其他內容，除第三方權利另有註明外，均屬本公司或合法權利人所有。</view>
					<view class="section">2. 會員於本服務上傳或發布之任何內容，視為授權本公司得於全球範圍、無償、可轉讓、可再授權之條件下，重製、改作、散布及公開展示，並製作衍生著作。</view>
					<view class="section">3. 未經書面同意，任何人不得擅自使用、改作或還原工程；違者應負全部法律責任。</view>

					<view class="chapter">第六章　付費、退款與責任上限</view>
					<view class="section">1. 本服務若涉及付費項目，付款完成即視為契約成立；除法令另有規定或活動頁面另載明，所有費用概不退還。</view>
					<view class="section">2. 因本公司可歸責事由致會員無法正常使用付費服務超過 48 小時者，本公司僅就受影響期間按比例退還已支付對價；退費總額以會員最近一次交易金額為最高上限。</view>
					<view class="section">3. 在法律允許範圍內，本公司對任何間接、附帶、特殊、懲罰性或衍生性損害不負賠償責任。</view>

					<view class="chapter">第七章 會員保證與賠償</view>
					<view class="section">1. 會員保證其使用本服務之行為不侵害任何第三人權利或違反法令。</view>
					<view class="section">2. 若因會員行為致本公司或其關係企業遭受第三人或主管機關調查、告訴、請求或處分，會員須負擔一切損害賠償責任（包括但不限於訴訟費用、律師費、罰鍰及商譽損失）。</view>

					<view class="chapter">第八章 系統暫停、中斷與免責</view>
					<view class="section">1. 本公司可因設備維護、升級、突發故障、天災或不可抗力事件，停止或中斷全部或部分服務。</view>
					<view class="section">2. 本公司對因上述情形或會員自身因素所致之任何直接或間接損害，概不負賠償責任。</view>
					<view class="section">3. 會員應自行備份上傳之內容；本公司不負資料滅失或毀損之責。</view>

					<view class="chapter">第九章 終止與變更</view>
					<view class="section">1. 本公司得隨時修改、暫停或終止全部或部分服務，並以公告或電子郵件通知。</view>
					<view class="section">2. 會員可依平台機制或來信申請終止帳號；自本公司確認日起，相關優惠與權益即行失效且不得要求補償。</view>

					<view class="chapter">第十章 智慧財產權保護</view>
					<view class="section">任何未經授權之使用或侵害，本公司得主張停止侵害、銷毀物品及損害賠償等一切法律救濟。</view>

					<view class="chapter">第十一章 爭議處理與準據法</view>
					<view class="section">1. 本文件之解釋與適用，以中華民國法律為準據法。</view>
					<view class="section">2. 因本條款或本服務所生爭議，雙方同意以臺灣臺中地方法院為第一審專屬管轄法院；涉及智慧財產或商業秘密者，改以智慧財產及商業法院臺中分院管轄。</view>
					<view class="section">3. 本公司得就侵權或商譽受損情形，向任何具有管轄權之法院聲請假處分或其他緊急救濟。</view>

					<view class="chapter">第十二章 附則</view>
					<view class="section">1. 本文件任何部分被法院裁定無效，不影響其餘條款效力。</view>
					<view class="section">2. 本文件以中文為定本；中、英文本有歧異時，以中文版本為準。</view>

					<view class="chapter">客服聯絡資訊</view>
					<view class="section">* 客服專線：0972‑817‑897</view>
					<view class="section">* 傳真專線：02‑8771‑4114</view>
					<view class="section">* 服務時間：週一至週五 09:00‑17:00（UTC+8）</view>
					<view class="section">* 客服信箱：xiakoya88@gmail.com</view>
					<view class="section">* 公司地址：106 臺北市大安區忠孝東路四段 270 號 2 樓之 1</view>
					<view class="section">若您對本文件內容有任何疑問，歡迎隨時與我們聯繫。</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
import sunMenu from '../components/sun-menu/sun-menu.vue'
import { uploadImg,addFeedback } from '@/api/system/user.js'
import { getCodeImg } from '@/api/login.js'
export default {
	components: {
		sunMenu
	},
	data() {
		return {
			formData: {
				title: '',
				name: '',
				email: '',
				tel: '',
				description: '',
				captcha: '',
				images: [],
				userId: this.$store.state.user.info.userId
			},
			fileList: [],
			captchaUrl: '/api/captcha',
			rules: {
				title: [{
					required: true,
					message: '請輸入問題主旨',
					trigger: ['blur', 'change']
				}],
				name: [{
					required: true,
					message: '請輸入您的稱呼',
					trigger: ['blur', 'change']
				}],
				email: [{
					required: true,
					message: '請輸入電子郵件',
					trigger: ['blur', 'change']
				}, {
					type: 'email',
					message: '請輸入正確的電子郵件格式',
					trigger: ['blur', 'change']
				}],
				tel: [{
					required: true,
					message: '請輸入聯絡電話',
					trigger: ['blur', 'change']
				}, {
					pattern: /^09\d{8}$/,
					message: '請輸入正確的台灣手機號碼格式',
					trigger: ['blur', 'change']
				}],
				description: [{
					required: true,
					message: '請輸入問題描述',
					trigger: ['blur', 'change']
				}, {
					max: 100,
					message: '問題描述不能超過100字',
					trigger: ['blur', 'change']
				}],
				captcha: [{
					required: true,
					message: '請輸入驗證碼',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	onLoad() {
		this.refreshCaptcha()
	},
	onShow() {
		uni.setStorageSync("activeId",'')
	},
	methods: { 
		afterRead(event) { 
			const { file } = event;
			if (this.fileList.length >= 3) {
				uni.showToast({
					title: '最多只能上傳3張圖片',
					icon: 'none'
				});
				return;
			}
			for(let i=0;i<file.length;i++){
				this.fileList.push({
					url: file[i].url
				});
				uploadImg(file[i].url).then(res=>{
					this.formData.images.push(res.data);
				})
			}
		},
		deletePic(event) {
			this.fileList.splice(event.index, 1);
			this.formData.images.splice(event.index, 1);
		},
		refreshCaptcha() { 
			getCodeImg().then(res=>{
				this.captchaUrl = 'data:image/gif;base64,' + res.img
				this.formData.uuid = res.uuid
			})
		},
		submitForm() {
			this.$refs.form.validate().then(valid => {
				if (valid) {
					uni.showLoading({
						title: '提交中'
					}); 
					addFeedback(this.formData).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功,我們會儘快回復您',
							icon: 'success'
						}); 
						this.resetForm();
					}).catch(err => {
						this.refreshCaptcha()
						uni.hideLoading();
						// uni.showToast({
						// 	title: err.msg,
						// 	icon: 'none'
						// });
					});
				}
			});
		},
		resetForm() {
			this.formData = {
				title: '',
				name: '',
				email: '',
				tel: '',
				description: '',
				captcha: '',
				images: []
			};
			this.fileList = [];
			this.refreshCaptcha();
		}
	}
}
</script>

<style lang="scss" scoped>
.about-us {
	min-height: 100vh;
	background-color: #f8f8f8;

	.page-container {
		padding: 32rpx;
		max-width: 1086px;
		margin: 0 auto; 
	}

	.header {
		text-align: center;
		margin-bottom: 28rpx;
		padding: 38rpx 0;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.contact-info {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

		.info-item {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.info-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.form-container {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 24rpx rgba(0, 0, 0, 0.05);

		.form-header {
			text-align: center;
			margin-bottom: 48rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
			}

			.form-desc {
				font-size: 26rpx;
				color: #666;
			}
		}

		.form-wrapper {
			/deep/ .u-form {
				.u-form-item {
					margin-bottom: 32rpx;
					position: relative;

					&__body {
						padding: 16rpx 0;
					}

					&__label {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}

					&__message {
						font-size: 24rpx;
					}
				}

				.u-input {
					&__input {
						font-size: 28rpx;
						color: #333;
					}

					&--textarea {
						background: #f8f8f8;
						border-radius: 8rpx;
						padding: 16rpx;
					}
				}
			}

			.word-count {
				position: absolute;
				right: 16rpx;
				bottom: 16rpx;
				font-size: 24rpx;
				color: #999;
			}

			.tips {
				font-size: 24rpx;
				color: #999;
				margin-top: 12rpx;
			}

			.captcha-container {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.captcha-input {
					flex: 1;
					background: #f8f8f8;
					border-radius: 8rpx;
				}

				.captcha-image {
					width: 240rpx;
					height: 80rpx;
					border-radius: 8rpx;
					cursor: pointer;
					transition: opacity 0.3s;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}

		.submit-btn {
			margin-top: 48rpx;

			/deep/ .u-button {
				height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 44rpx;
				box-shadow: 0 8rpx 16rpx rgba(41, 121, 255, 0.2);
				transition: all 0.3s;

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 8rpx rgba(41, 121, 255, 0.2);
				}
			}
		}
	}

	.terms-container {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 24rpx rgba(0, 0, 0, 0.05);

		.terms-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 16rpx;
		}

		.terms-date {
			font-size: 24rpx;
			color: #666;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.terms-content {
			.chapter {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin: 32rpx 0 16rpx;
				padding-bottom: 8rpx;
				border-bottom: 2rpx solid #eee;
			}

			.section {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 16rpx;
				padding-left: 32rpx;
			}
		}
	}
}

// 适配iPhone底部安全区
.safe-area-inset-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
